<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>的使用创建dom节点动态生成表格</h1>
        <label for="">行：</label>
        <input type="text" id="row">
        <label for="">列：</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="生成">
        <div id="output">
            <!-- <table>
                <tbody>
                    <tr>
                        <td>浮动法</td>
                    </tr>
                </tbody>
            </table> -->
        </div>
    </div>

    <script>
        /*
            【1】先获取页面中你需要用到的元素
            【2】点击生成的时候根据行和列数生成 表格
                【2】拿到输入框的值
                【2】根据值循环生成表格
            【3】点击表格中的 复制 和删除按钮 
                复制：复制整行 添加 tbody
                删除：把整行从tbody里面删除

         */
        //  【1】先获取页面中你需要用到的元素
        var output = document.querySelector('#output');
        var btn = document.querySelector('#btn');
        var row = document.querySelector('#row');
        var col = document.querySelector('#col');

        // 生成table 和tbody
        var table = document.createElement('table');
        var tbody = document.createElement('tbody');

        // 把tbody放入table中
        table.appendChild(tbody);

        // 【2】点击生成的时候根据行和列数生成 表格
        btn.onclick = function () {
            // 1】拿到输入框的值
            var _row = row.value;
            var _col = col.value;
            renderTable(_row, _col);
            // 需要点击复制和删除按钮 ，必须保证页面中有这个两个按钮
            // 等页面渲染完成之后才能执行这个操作
            // 在获取元素 绑定事件
            var copyBtn = document.querySelectorAll('.copy');
            var deleteBtn = document.querySelectorAll('.delete');

            // 事件委托：给父元素output元素绑定事件
            output.onclick = function (e) {
                // 判断点击的是复制按钮，实现克隆元素
                if (e.target.className === 'copy') {
                    var newTr = e.target.parentNode.parentNode.cloneNode(true);
                    tbody.appendChild(newTr)
                }
                // 判断点击的时候删除按钮 实现删除元素
                if (e.target.className === 'delete') {
                    // e.target就是鼠标点击的元素
                    e.target.parentNode.parentNode.remove();
                }
            }

        }

        function renderTable(_row, _col) {
            // 2】循环生成行和列
            for (var i = 0; i < _row; i++) {
                var tr = document.createElement('tr');

                // 循环生成列数
                for (var j = 0; j < _col; j++) {
                    var td = document.createElement('td');
                    td.innerHTML = '单元格' + i + j;
                    tr.appendChild(td);
                }
                // 多一列出来 存放删除和赋值按钮
                var _td = document.createElement('td');
                var copyEle = document.createElement('button');
                // 给元素绑定给一个id属性
                copyEle.className = 'copy';
                copyEle.innerHTML = '复制';
                var deleteEle = document.createElement('button');
                deleteEle.className = 'delete';
                deleteEle.innerHTML = '删除'

                _td.appendChild(copyEle);
                _td.appendChild(deleteEle);

                // 把这个的多出来的列也放入 tr
                tr.appendChild(_td)

                // 把生成的tr放入tbody中
                tbody.appendChild(tr);
            }

            // 把table放入output里面
            output.appendChild(table);
        }
    </script>

</body>

</html>